<template>
    <div>
        <header>
            <nut-row>
                <nut-col :span="3">
                    <img class="logo" src="https://img61.ddimg.cn/2021/4/21/202104211402256635.png" alt="">
                </nut-col>
                <nut-col :span="18">
                    <nut-searchbar class="py0"></nut-searchbar>
                </nut-col>
                <nut-col :span="3">
                    <i @click="router.push({path:'/scan'})" class="iconfont icon-iconfontscan f8 mt1 block"></i>
                </nut-col>
            </nut-row>
        </header>
        <main>
            <nut-swiper :pagination-visible="true" pagination-color="#426543" auto-play="3000">
                <nut-swiper-item>
                    <img src="https://gtms04.alicdn.com/tps/i4/TB1pgxYJXXXXXcAXpXXrVZt0FXX-640-200.jpg" alt="" />
                </nut-swiper-item>
                <nut-swiper-item>
                    <img src="https://img.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg" alt="" />
                </nut-swiper-item>
                <nut-swiper-item>
                    <img src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/217479/2/8852/67547/61c44793E0a92f73d/21c4052257e55ec1.jpg!cr_1053x420_4_0!q70.jpg.dpg" alt="" />
                </nut-swiper-item>
            </nut-swiper>
            <nut-swiper class="nav_swiper" :pagination-visible="true" pagination-color="#426543">
                <nut-swiper-item>
                    <ul class="nav_list mb0">
                        <li><img src="https://img63.ddimg.cn/ddimg/2229/tushu-1620826735.png"></li>
                        <li><img src="https://img63.ddimg.cn/ddimg/2229/tongshu-1620826775.png"></li>
                        <li><img src="https://img63.ddimg.cn/ddimg/2229/xinshubang-1620826881.png"></li>
                        <li><img src="https://img60.ddimg.cn/2021/11/8/2021110816081069564.png"></li>
                        <li><img src="https://img63.ddimg.cn/2021/11/4/2021110418150552051.png"></li>
                    </ul>
                    <ul class="nav_list m0">
                        <li><img src="https://img63.ddimg.cn/ddimg/2229/fuzhuang-1620826753.png"></li>
                        <li><img src="https://img61.ddimg.cn/2021/11/4/2021110422460978561.png"></li>
                        <li><img src="https://img63.ddimg.cn/ddimg/2229/qiandao-1620826984.png"></li>
                        <li><img src="https://img60.ddimg.cn/ddimg/2229/ertongjiexin-1623317699.png"></li>
                        <li><img src="https://img62.ddimg.cn/2021/11/17/2021111720171975184.png"></li>
                    </ul>
                </nut-swiper-item>
                <nut-swiper-item>
                    <ul class="nav_list mb0">
                        <li><img src="https://img63.ddimg.cn/ddimg/2229/tushu-1620826735.png"></li>
                        <li><img src="https://img63.ddimg.cn/ddimg/2229/tongshu-1620826775.png"></li>
                        <li><img src="https://img63.ddimg.cn/ddimg/2229/xinshubang-1620826881.png"></li>
                        <li><img src="https://img60.ddimg.cn/2021/11/8/2021110816081069564.png"></li>
                        <li><img src="https://img63.ddimg.cn/2021/11/4/2021110418150552051.png"></li>
                    </ul>
                    <ul class="nav_list m0">
                        <li><img src="https://img63.ddimg.cn/ddimg/2229/fuzhuang-1620826753.png"></li>
                        <li><img src="https://img61.ddimg.cn/2021/11/4/2021110422460978561.png"></li>
                        <li><img src="https://img63.ddimg.cn/ddimg/2229/qiandao-1620826984.png"></li>
                        <li><img src="https://img60.ddimg.cn/ddimg/2229/ertongjiexin-1623317699.png"></li>
                        <li><img src="https://img62.ddimg.cn/2021/11/17/2021111720171975184.png"></li>
                    </ul>
                </nut-swiper-item>
            </nut-swiper>
            <div class="home-seckill">
                <div class="top_title flex p1">
                    <h3 class="m0 f3">今日抢购</h3>
                    <a class="f1" href="">查看更多 >></a>
                </div>
                <ul class="flex mth">
                    <li>
                        <img src="https://img3m9.ddimg.cn/71/33/28992419-1_h_47.jpg" draggable="true">
                        <p>蛤蟆先生去看心</p>
                    </li>
                    <li>
                        <img src="https://img3m4.ddimg.cn/32/35/23579654-1_h_6.jpg" draggable="true">
                        <p>三体(全三册)</p>
                    </li>
                    <li>
                        <img src="https://img3m4.ddimg.cn/19/30/29329264-1_h_10.jpg" draggable="true">
                        <p>第一人称单数</p>
                    </li>
                    <li>
                        <img src="https://img3m2.ddimg.cn/93/6/29336862-1_h_29.jpg" draggable="true">
                        <p>平安小猪</p>
                    </li>
                </ul>
            </div>
            <div class="home-seckill">
                <div class="top_title p1 fl">
                    <h3 class="m0 f3">品牌抢购</h3>
                </div>
                <ul class="flex mth">
                    <li>
                        <img src="https://img61.ddimg.cn/auction/c7d926fb-1993-46f0-b349-fdb5d4a1206d.jpg" draggable="true">
                    </li>
                    <li>
                        <img src="https://img58.ddimg.cn/85250192729468_y.jpg" draggable="true">
                    </li>
                    <li>
                        <img src="https://img52.ddimg.cn/81650165800012_y.jpg" draggable="true">
                    </li>
                    <li>
                        <img src="https://img57.ddimg.cn/226350186291437_y.jpg" draggable="true">
                    </li>
                </ul>
            </div>
            <!-- 商品列表 -->
            <div class="good_lists p1">
                <div class="top_title p1 fl">
                    <h3 class="m0 f3">为您推荐</h3>
                </div>
                <ul class="flex">
                    <li>
                        <img src="https://img3x9.ddimg.cn/71/33/28992419-1_h_47.jpg" alt="">
                        <div class="product-name">蛤蟆先生去看心理医生（年销200万册！英国经典心理咨询入门书，知名心理学家李松蔚强烈推荐）</div>
                        <div class="product-price-wrap flex mxh">
                            <span>￥19.00</span>
                            <a>找相似</a>
                        </div>
                    </li>
                    <li>
                        <img src="https://img3x2.ddimg.cn/85/8/29325172-1_h_9.jpg" alt="">
                        <div class="product-name">如果历史是一群喵1-9全集（套装共9册）（当当专享限量喵咪拼图）</div>
                        <div class="product-price-wrap flex mxh">
                            <span>￥132.00</span>
                            <a>找相似</a>
                        </div>
                    </li>
                    <li>
                        <img src="https://img3x4.ddimg.cn/32/35/23579654-1_h_6.jpg" alt="">
                        <div class="product-name">三体：全三册 刘慈欣代表作，亚洲“雨果奖”获奖作品！</div>
                        <div class="product-price-wrap flex mxh">
                            <span>￥54.87</span>
                            <a>找相似</a>
                        </div>
                    </li>
                    <li>
                        <img src="https://img3x7.ddimg.cn/86/17/1612974317-1_h_99.jpg" alt="">
                        <div class="product-name">【良品铺子-猪肉脯100g】零食小吃特产肉干网红休闲食品小包装</div>
                        <div class="product-price-wrap flex mxh">
                            <span>￥29.9</span>
                            <a>找相似</a>
                        </div>
                    </li>
                </ul>
            </div>
        </main>
    </div>
</template>

<script>
import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'
import {useRouter} from "vue-router"
export default {
    name: '',
    setup() {
        let router=useRouter()
        const data = reactive({

        })
        const refData = toRefs(data);
        return {
            ...refData,router
        }
    },
    component:{
        
    }
};
</script>
<style scoped lang="scss">
header{
    position: fixed;top: 0;width: 100vw;z-index:999;background-color: #fff;
    .logo{width: 30px;height: auto;margin-top: 8px;}
}
main{
    margin: 50px 0 70px 0;
    .nut-swiper{
        width: 100%;margin: 0 auto;
        img{width: 100%;height: 130px;}
    }
    .nav_swiper{
        height: 190px;
        .nav_list{
            display: flex;justify-content:space-around;
            li{
                width: 20%;
                img{width: 100%;height: auto;}
            }
        }
    }
    .home-seckill{
        .top_title{
            background-color: #fff7f7;
        }
        ul{
            li{
                width: 25%;text-align: center;
                img{width: 100%;height: auto;}
                p{font-size: 12px;margin:0;}
            }
        }
    }
    .good_lists{
        background-color: #fff7f7;
        ul{
            flex-wrap: wrap;
            li{
                margin-bottom: 10px;width: 45vw;border-radius: 10px;overflow: hidden;background-color: #fff;
                img{width: 100%;}
                .product-name{padding: 0 9px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    color: #111;
                    font-size: 13px;
                    line-height: 16px;
                    max-height: 31px;
                    margin-top: 10px;
                }
                .product-price-wrap{
                    padding: 0 9px;align-items: center;
                    span{font-size: 18px;font-weight: bold;}
                    a{
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-box-flex: 0;
                        -webkit-flex: 0 0 auto;
                        flex: 0 0 auto;
                        border: 1px solid #dcdcdc;
                        border-radius: 18px;
                        color: #999;
                        font-size: 10px;
                        height: 18px;
                        -webkit-box-align: start;
                        -webkit-align-items: flex-start;
                        align-items: flex-start;
                        -webkit-box-pack: center;
                        -webkit-justify-content: center;
                        justify-content: center;
                        padding: 0 7px;
                        line-height: 18px;
                    }
                }
            }
        }
    }
}
</style>